<template>
  <li :style="{ backgroundColor: color }">
    <img @click="pathTo(item)" :src="baseURL + item.img" alt="" />
    <h4>{{ item.name }}</h4>
    <div>
      <div class="good__price">
        <span>${{ item.originalPrice }}</span>
        <span>${{ item.price }}</span>
      </div>
      <div class="good__control">
        <div @click="handleDelete(item)" v-show="showControl(item)">
          <van-icon size="10rem" name="minus" />
        </div>
        <span v-show="showControl(item)">{{ showControl(item) }}</span>
        <div @click="handleAdd(item)">
          <van-icon size="10rem" name="plus" />
        </div>
      </div>
    </div>
  </li>
</template>

<script setup lang="ts">
import { GoodsItem } from "@/views/home/index.vue";
import { useRouter } from "vue-router";
import type { ShopBagType } from "@/views/home/index.vue";
import { useShopBagStore } from "@/store";
import { storeToRefs } from "pinia";
import { baseURL } from '@/api/request';
const store = useShopBagStore();
interface Props {
  item: GoodsItem;
  color: string;
}
const router = useRouter();
withDefaults(defineProps<Props>(), {
  item: () => null,
  color: "#000",
});
const { list: storeList } = storeToRefs(store);
const handleAdd = (item: GoodsItem | ShopBagType) => {
  store.addShopBagList(item);
};
function showControl(item: GoodsItem) {
  return storeList.value.find((it: ShopBagType) => it.id === item.id && it.token === localStorage.getItem("token"))?.count;
}
const handleDelete = (item: GoodsItem | ShopBagType) => {
  store.deleteShopBagList(item);
};
const pathTo = (item: GoodsItem) => {
  router.push({
    path: `/details/${item.id}`,
    query: { item: JSON.stringify(item) },
  });
};
</script>

<style lang="scss" scoped>
li {
  @include flex($fd: column, $ai: center);
  border-radius: 10rem;
  width: 100rem;
  height: 84rem;

  h4 {
    font-size: 12rem;
    height: 500;
    transform: translateY(-22rem);
  }

  img {
    height: 52rem;
    width: 67rem;
    object-fit: contain;
    transform: translateY(-24rem);
  }

  >div {
    @include flex($jc: space-between, $ai: center);
    transform: translateY(-16rem);
    font-size: 10rem;
    width: 100%;

    .good__price {

      @include flex($fd: column);
      margin-left: 10rem;
    }

    span:first-child {
      margin-bottom: 2rem;
      font-size: 8rem;
      text-decoration: line-through;
      color: #959494;
    }

    .good__control {
      margin-right: 8rem;
      @include flex($jc: center, $ai: center);
      font-size: 12rem;

      span {
        margin: 0 4rem;
      }

      div {
        height: 14rem;
        width: 14rem;

        background-color: white;
        @include flex($jc: center, $ai: center);
        border-radius: 50%;
      }
    }
  }
}
</style>
